<template>
  <div class="ctlSearch-root">
    <lark-card body-height="max-content" body-width="19vw" :radius="false" :show-close-btn="false" :show-title="false">
      <div class="input-search">
        <el-input size="large" v-model="searchForm.value" placeholder="请输入内容">
          <el-select v-model="searchForm.searchType" slot="prepend" placeholder="请选择">
            <el-option v-for="(item, index) in selectTypeList" :key="index" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
          <div slot="append">
            <i v-if="searchForm.searchType == 1" @click="moreSearch" class="el-icon-s-grid more-search-btn"></i>
            <span class="btn-cut" v-if="searchForm.searchType == 1"></span>
            <i @click="searchBtn" class="el-icon-search search-btn "></i>
          </div>
        </el-input>
      </div>
      <el-collapse-transition>

        <div class="more-search" v-show="moreSearchVisible && searchForm.searchType == 1">

          <template>
            <el-date-picker
              size="mini"
              v-model="searchForm.date"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <area-select v-model="searchForm.location" :proxy="{'size':'mini'}"></area-select>
          </template>
        </div>
      </el-collapse-transition>
    </lark-card>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'
  import areaSelect from '@/components/ServiceComponents/areaSelect'
  import moment from 'moment'

  export default {
    name: 'ctlSearch',
    components: {
      areaSelect
    },

    setup(props, content) {
      let data = reactive({
        test: null,
        moreSearchVisible: false,
        selectTypeList: [{ label: '采集信息', value: 1 }, { label: '适生区域', value: 2 }],
        searchForm: {
          searchType: 1,
          value: null,
          date: [moment().add(-1, 'y').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
          location: []
        },

        queryTypeList: [
          { name: '种质', value: 1 }, { name: '标本', value: 2 }, { name: '土壤', value: 3 }, { name: '水分', value: 4 }
        ]
      })

      const resetSearch = () => {
        data.searchForm.date = [moment().add(-1, 'y').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
        data.searchForm.location = []
      }

      const moreSearch = () => {

        data.moreSearchVisible = !data.moreSearchVisible
      }
      const searchBtn = () => {
        let requestData
        if (data.searchForm.searchType == 1) {
          if (data.moreSearchVisible) {
            requestData = {
              searchType: data.searchForm.searchType,
              value: data.searchForm.value,
              startDate: data.searchForm.date[0],
              endDate: data.searchForm.date[1],
              location: data.searchForm.location
            }
          } else {
            requestData = {
              value: data.searchForm.value,
              searchType: data.searchForm.searchType
            }
          }
        } else {
          requestData = {
            searchType: data.searchForm.searchType,
            value: data.searchForm.value
          }
        }

        content.emit('searchAction', requestData)
        data.moreSearchVisible = false
        resetSearch()
      }
      return { ...toRefs(data), moreSearch, searchBtn }
    }
  }
</script>

<style lang="scss">
  .ctlSearch-root {
    .input-search {
      .more-search-btn {
        margin-right: 6px;
      }

      .more-search-btn, .search-btn {
        &:hover {
          cursor: pointer;
        }
      }

      .btn-cut {
        border-right: 1px solid
      }

      .search-btn {
        margin-left: 6px
      }
    }

    .more-search {
      height: 140px;
      padding: 10px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 90%;
      position: relative;
      left: 5%;

      .area-select-root{
        .el-input{
          .el-input__inner{
            border-radius: 25px;
          }
        }
      }
    }
  }
</style>

<style lang="scss">
  .ctlSearch-root {
    .el-input {
      .el-select {
        .el-input {
          width: 115px;
          border: none;
        }
      }
    }

    .input-search {

      .el-input-group__append {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 24px;
      }
    }

    .more-search {
      .el-radio-group {
        width: 100%;

        .r-item-container {
          display: flex;
          flex-direction: row;
          justify-content: center;

          .el-radio-button {
            flex: 1;
            display: flex;
            flex-direction: row;
            justify-content: center;
          }
        }
      }
    }

    .el-input__icon.el-range__icon.el-icon-date {
      display: none;
    }

    .el-date-editor.el-range-editor.el-input__inner.el-date-editor--daterange.el-range-editor--mini {
      width: 100%;
      padding-right: 0;
      padding-left: 0;
    }

    .el-range-editor--mini {
      .el-range-input {
        font-size: 14px;
      }
    }

    .el-range-input {
      width: 100%;
    }
  }

</style>
